<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML布局</title>
</head>

<body>
  <!-- 
    列表
        无序列表：ul li
          ul: 无序列表
          li: 列表项
        有序列表：ol li
          ol: 有序列表
          li: 列表项
        定义列表：dl dt dd
          dl: 定义列表
          dt: 定义标题
          dd: 定义内容,描述/详情
    -->
  <div>
    <div class="tab" id="tab1">数码</div>
    <div class="tab">众测</div>
    <ul class="content1">
      <li>微软SurfacePro9快速上手：除了换芯还有细节变了</l>
      <li>荣耀MagicVs折叠屏手机外观设计曝光：搭载骁龙8+</li>
      <li>小米12SUltra概念机入驻徕卡旗舰店新机入网图公布</li>
      <li>三星为GalaxyWatch5/Pro系列推出两款金属表带</li>
      <li>小米商城App手机自助检测上线13项手机专项自查</li>
      <li>华为新专利手表可测呼出气体华为官方晒月全食照片</li>
    </ul>
    <hr>
    <ol>
      <li>微软SurfacePro9快速上手：除了换芯还有细节变了</l>
      <li>荣耀MagicVs折叠屏手机外观设计曝光：搭载骁龙8+</li>
      <li>小米12SUltra概念机入驻徕卡旗舰店新机入网图公布</li>
      <li>三星为GalaxyWatch5/Pro系列推出两款金属表带</li>
      <li>小米商城App手机自助检测上线13项手机专项自查</li>
      <li>华为新专利手表可测呼出气体华为官方晒月全食照片</li>
    </ol>
    <style>
      .tab {
        display: inline-block;
        /* padding: 10px; */
        background-color: #f2f2f2;
        cursor: pointer;
      }

      #tab1 {
        border-top: 5px solid orange;
      }
    </style>
    <hr>
    <div>
      <dl>
        <dt>选购指南</dt>
        <dd>手机</dd>
        <dd>电视</dd>
        <dd>笔记本</dd>
        <dd>平板</dd>
        <dd>穿戴</dd>
        <dd>耳机</dd>
        <dd>家电</dd>
        <dd>路由器</dd>
        <dd>音箱</dd>
        <dd>配件</dd>
      </dl>
      <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dd>维修服务价格</dd>
        <dd>订单查询</dd>
        <dd>以旧换新</dd>
        <dd>保障服务</dd>
        <dd>防伪查询</dd>
        <dd>F码通道</dd>
      </dl>
      <dl>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店/专区</dd>
      </dl>
      <dl>
        <dt>关于小米</dt>
        <dd>了解小米</dd>
        <dd>加入小米</dd>
        <dd>投资者关系</dd>
        <dd>可持续发展</dd>
        <dd>廉洁举报</dd>
      </dl>
      <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dd>公益基金会</dd>
      </dl>
    </div>
    <style>
      dl {
        display: inline-block;
        /* 垂直居中 */
        vertical-align: top;
        margin-left: 40px;
      }

      dt {
        font-weight: bold;
        margin-bottom: 8px;
      }

      dd {
        margin-left: 0;
        margin-bottom: 4px;
      }
    </style>
  </div>
  <hr />
  <div>
    <!-- 
      表格：
        table: 表格
        tr: 表格行
        td: 表格单元格
        th: 表格表头单元格
        caption: 表格标题
    -->
    <table border="0" cellspacing="0" cellpadding="0">
      <caption>球员排行</caption>
      <th class="rank">名次</th>
      <th>球员</th>
      <th>球队</th>
      <th>当日</th>
      <tr>
        <td class="digital"><i>1</i></td>
        <td>库里</td>
        <td>勇士</td>
        <td>40</td>
      </tr>
      <tr>
        <td class="digital"><i>2</i></td>
        <td>塔图姆</td>
        <td>凯尔特人</td>
        <td>34</td>
      </tr>
      <tr>
        <td class="digital"><i>3</i></td>
        <td>福克斯</td>
        <td>国王</td>
        <td>32</td>
      </tr>
      <tr>
        <td><i>4</i></td>
        <td>巴雷特</td>
        <td>尼克斯</td>
        <td>30</td>
      </tr>
      <tr>
        <td><i>5</i></td>
        <td>约基奇</td>
        <td>掘金</td>
        <td>29</td>
      </tr>
    </table>
  </div>
  <style>
    table {
      border-top: 3px solid rgb(191, 191, 191);
      text-align: center;
      color: rgb(118, 112, 105);
    }

    .rank {
      border-top-color: rgb(190, 5, 5);
    }

    th {
      color: grey;
    }

    .digital {
      color: red;
    }

    tr:nth-child(odd) {
      background-color: rgb(248, 248, 248);
    }
  </style>
  <hr>
  <div>
    <!-- 
      表结构标签
        标签：
          thead: 表格头部
          tbody: 表格主体
          tfoot: 表格脚部
      合并单元格
        跨行合并：rowspan,保留最上单元格，属性取值为数字，表示需要合并的单元格数量
        跨列合并：colspan，保留最左单元格，属性取值为数字，表示需要合并的单元格数量
    -->
    <table class="grade" border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>总分</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>99</td>
          <td rowspan="2">100</td>
          <td>199</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>98</td>
          <td>198</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总结</td>
          <td colspan="3">全市第一</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <style>
    .grade {
      text-align: left;
    }
  </style>
  <hr>
  <div>
    <!-- 
      表单：
        form: 表单
        input: 输入框
          属性：
          type: 类型
            text: 单行文本框
            password: 密码框
            radio: 单选框
              属性：
              name: 单选框组名称
              checked: 默认选中
            checkbox: 复选框
            file: 文件上传框
              multiple属性: 多文件上传
          placeholder: 提示文字,占位文本
        select: 下拉框,嵌套option标签,option是下拉菜单的每一项
        textarea: 多行文本框
        label: 表单标签,用于绑定input标签
        button: 按钮
          属性：
            submit: 提交按钮
            reset: 重置按钮
            button: 普通按钮
    -->
    <div>
      <div class="search-box">
        <input type="text" id="search-input" placeholder="厨房置物架">
        <img class="photo" src="./icon/照相机.svg" alt="扫一扫">
        <div class="search"><img class="search-icon" src="./icon/搜索.svg" alt="搜索"></div>
      </div>

    </div>
    <style>
      input {
        border: 2px solid rgb(226, 36, 28);
        width: 300px;
        height: 35px;
        padding-left: 12px;
      }

      .search-icon {
        margin-left: 12px;
        width: 35px;
        height: 20px;
        margin-top: 10px;

      }

      .search-box {
        display: flex;
        position: relative;
        margin-left: 10px;
      }

      .search {
        border: 2px solid rgb(226, 36, 28);
        width: 60px;
        height: 37px;
        flex-direction: row;
        margin-left: 12px;
        align-items: center;
        background-color: rgb(226, 36, 27);
        color: #fff;
      }

      img.photo {
        margin-left: -45px;
        margin-bottom: -12px;
        width: 32px;
        height: 30px;
        margin-top: 5px;
      }
    </style>
  </div>
  <hr>
  <div class="form-border">
    <div class="form-content">
      <img class="header-code" src="./image/code.png" alt="二维码">
      <form action="" method="post">
        <!-- 头部 -->
        <div class="header-form">
          <div class="header-button"><b>登录</b></div>
          <div class="header-register">注册</div>
        </div>
        <!-- 表单主体 -->
        <div>
          <input class="input-text" type="text" placeholder="邮箱/手机号/小米ID">
          <span class="span-text"><input class="input-pwd" type="password" placeholder="密码"><img class="yj"
              src="./image/yj.png" alt="点击显示密码"></span>
          <span class="span-check"><input class="input-check" type="checkbox" name="agree"
              value="已阅读协议">已阅读并同意小米账号&nbsp;<strong>用户协议</strong>&nbsp;和&nbsp;<b>隐私政策</b>&nbsp;</span>
          <input class="input-button" type="submit" value="登录">
          <div class="body-bottom"><span class="bottom-text">忘记密码?</span><span class="bottom-text">手机号登录</sp>
          </div>
        </div>
        <!-- 尾部 -->
        <div>
          <div class="footer-text">其他登录方式</div>
          <div class="footer-login">
            <img src="./icon/支付宝.svg" alt="支付宝">
            <img src="./icon/微信.svg" alt="微信">
            <img src="./icon/QQ.svg" alt="QQ">
            <img src="./icon/微博.svg" alt="微博">
          </div>
        </div>
      </form>
    </div>
  </div>
  <style>
    .form-border {
      margin: 0;
      padding: 0;

    }

    .form-content {
      width: 360px;
      height: 420px;
      border: 1px solid #000;
      margin: 0 auto;
      padding: 0 0 20px 40px;
      box-shadow: 0 0 10px #ccc;
    }

    .header-form {
      display: flex;
      /* justify-content: space-between; */
      align-items: center;
      margin-bottom: 20px;
      margin-top: 30px;
    }

    .header-button {
      margin-right: 15px;
      border-bottom: 3px solid rgb(255, 86, 7);
      padding-bottom: 2px;
    }

    .header-register {
      color: rgb(197, 197, 197);
      padding-bottom: 2px;
    }

    .header-code {
      display: flex;
      margin-right: 0px;
      width: 50px;
      height: 50px;
      position: absolute;
      padding-left: 311px;
    }

    .input-text {
      margin-top: 10px;
      background-color: rgb(249, 249, 249);
      border: none;
      margin-bottom: 10px;
    }

    .input-pwd {
      background-color: rgb(249, 249, 249);
      border: none;
      margin-top: 10px;
    }

    .span-text {
      display: inline-flex;
      position: relative;
    }

    .yj {
      margin-left: -35px;
      margin-top: 10px;
    }

    .span-check {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
      font-size: 12px;
    }

    .input-check {
      width: 12px;
      height: 12px;
      border: 1px solid rgb(249, 249, 249);
      background-color: rgb(249, 249, 249);
      margin-right: 5px;

    }

    .input-button {
      background-color: rgb(254, 190, 152);
      height: 50px;
      color: #fff;
      font-weight: 600;
      border: none;
      width: 314px;
    }

    .body-bottom {
      padding-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 314px;
    }

    .bottom-text {
      color: rgb(251, 144, 138);
    }

    .footer-text {
      color: rgb(197, 197, 197);
      margin-top: 20px;
      width: 314px;
      text-align: center;
    }

    .footer-login {
      padding-top: 20px;
      width: 314px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    .footer-login img {
      width: 30px;
      height: 30px;
    }
  </style>
  <hr>
  <div>
    <!-- 
      单选功能
      type="radio" 
    -->
    我是<input type="radio" name="gender" value="male" checked style="width: 25px; height: 25px;">男
    <input type="radio" name="gender" value="female" style="width: 25px; height: 25px;">女
  </div>
  <hr>
  <div>
    <!-- 
      复选功能
      type="checkbox"
    -->
    <input style="width: 15px; height: 15px;" type="checkbox" name="agree" value="agree" checked>我同意<a
      href="#">注册条款</a>和<a href="#">会员加入标准</a><br>

    兴趣爱好：
    <input style="width: 15px; height: 15px;" type="checkbox" name="hobby" value="code">敲代码
    <input style="width: 15px; height: 15px;" type="checkbox" name="hobby" value="code" checked>敲前端代码
    <input style="width: 15px; height: 15px;" type="checkbox" name="hobby" value="code" checked>敲前端HTML代码
  </div>
  <hr>
  <div>
    <!-- 
      文件上传：
        type="file" multiple属性: 多文件上传
    -->
    <input type="file" name="file" multiple>
  </div>
  <hr>
  <div>
    <!-- 
      下拉菜单：
        select: 下拉框
        option: 下拉菜单的每一项
    -->
    <span>请选择城市：</span>
    <select name="city" id="city">
      <option value="bj" selected>北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
      <option value="cd">成都</option>
    </select>
  </div>
  <hr>
  <div>
    <!-- 
      文本域：
        textarea: 多行文本框
    -->
    <textarea name="text" id="text" cols="50" rows="3">发布你的评论</textarea>
  </div>
  <style>
    textarea {
      border: 3px solid rgb(249, 180, 110);
      border-radius: 10px;
    }
  </style>
  <hr>
  <div class="label-content">
    <!-- 
      label标签：
        用于绑定input标签,当鼠标移到input标签上时,会显示label标签中的文字提示
        for属性：
          绑定input标签的id属性
    -->
    <div class="label-phone">
      <label for="phone">手机号码：</label>
      <select name="country">
        <option value="cn" style="border:2px solid #ccc;">中国大陆 +86</option>
      </select>
      <input class="label-text-phone" style="border: 2px solid #ccc;" type="text" id="phone" name="phone"
        placeholder="请输入你的手机号">
    </div>
    <br>
    <label class="label-vertifycode">验证码：<input style="border: 2px solid #ccc;" type="text" name="vertifycode"
        id="vertifycode" placeholder="请输入验证码">
      <span class="getcode">获取验证码</span>
    </label>
    <input class="label-sub" type="submit" value="注册">
  </div>
  <style>
    .label-content {
      width: 600px;
      height: 180px;
      border: 1px solid #ccc;

    }

    .label-text-phone {
      width: 223px;
      height: 35px;
      border: 1px solid #ccc;
    }

    .label-phone {
      display: flex;
      flex-direction: row;
      width: 500px;
      height: 40px;
      margin-left: 50px;
    }

    .label-vertifycode {
      display: flex;
      align-items: center;
      width: 400px;
      height: 40px;
      margin-left: 70px;
    }

    .getcode {
      color: rgb(250, 127, 96);
      margin-left: -100px;
    }

    .label-sub {
      background-color: rgb(254, 190, 152);
      border: none;
      margin-top: 40px;
      margin-left: 132px;
      width: 320px;
    }
  </style>
  <hr>
  <div>
    <!-- 
      布局标签：
        无语义标签：作用是布局网页
          div: 块级元素,独占一行
          span: 行内元素,不独占一行
        有语义标签：
          header: 页眉
          nav: 导航
          footer: 页脚
          aside: 侧边栏
          section: 区块
          article: 文章
    -->
  </div>
</body>

</html>